<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            input {
                height: 50px;
                width: 80%;
                font-size: 18px;
                color: #8E8C8C;
            }
            
            input::-webkit-input-placeholder {
                color: #ccc;
            }
            
            .divider {
                height: 15px
            }
            
            .email,
            .passwd {
                background: #fff;
            }
            
            .passwd img,
            .email img {
                vertical-align: top;
            }
            
            .item {
                background-color: #fff;
                border-bottom: 1px solid #e0e0e0;
                position: relative;
            }
            
            .btn {
                margin: 3px 10px;
                background: #ff6836;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 20px;
                margin-top: 20px;
                border-radius: 5px;
                color: #fff;
            }
            
            .email img {
                width: 25px;
                margin-top: 15px;
                margin-left: 10px;
                margin-right: 9px;
            }
            
            .passwd img {
                height: 25px;
                margin-top: 10px;
                margin-left: 10px;
                margin-right: 10px;
            }
            
            .bottom {
                position: absolute;
                left: 0px;
                bottom: 0px;
                width: 100%;
                text-align: center;
                font-size: 12px;
            }
            
            .bottom img {
                height: 50px;
            }
            
            .bottom .arrow {
                text-align: center;
                margin: 10px 0;
            }
            
            .bottom .arrow img {
                width: 40px;
                height: 20px;
            }
            
            #qqpic {
                margin-right: 10px;
                margin-left: 10px;
            }
            
            .thirdinfo {
                color: #666;
                margin-top: 10px;
            }
            
            .thirdcompy .left {
                margin-right: 20px;
            }
            
            .thirdcompy .left,
            .thirdcompy .right {
                width: 40%;
                display: inline-block;
                background: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                vertical-align: top;
                text-align: left;
                font-size: 18px;
            }
            
            .thirdcompy .left img,
            .thirdcompy .right img {
                width: 30px;
                height: 30px;
                float: left;
                margin: 5px 10px;
            }
            
            .thirdcompy span {
                line-height: 40px;
                color: #666;
            }
            
            .loginmore {
                margin-top: 10px;
            }
            
            .loginmore span {
                color: #0078ff;
            }
            
            .loginmore .forget {
                margin-left: 10px;
            }
            
            .loginmore .phone {
                margin-right: 10px;
                float: right;
            }
            
            .btnhover {
                background-color: #dcdcdc !important;
            }
            
            .buyhover {
                background-color: rgba(252, 85, 0, 0.6) !important;
            }
            
            .presshover {
                background-color: #FAFAFA !important;
            }
            
            .txthover {
                color: rgba(0, 120, 255, 0.6) !important;
            }
            
            input {
                outline: none;
            }
        </style>
    </head>

    <body>
        <section class="divider"></section>
        <section>
            <div class="item email">
                <img src="../image/login01.png">
                <input type="text" placeholder="邮箱" id="email">
            </div>
            <div class="item passwd">
                <img src="../image/login02.png">
                <input type="password" placeholder="密码" id="passwd">
            </div>
            <div class="btn" tapmode onclick="fnLogin();">登 录</div>
        </section>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/SHA1.js"></script>
    <script type="text/javascript" src="../script/remotedb.js"></script>
    <script type="text/javascript">
        apiready = function() {

        };

        function fnLogin() {
            fnPost('user/login', {
                body: JSON.stringify({
                    username: $api.byId('email').value,
                    password: $api.byId('passwd').value
                })
            }, 'application/json', false, false, function(ret, err) {
                if (ret && ret.id) {

                    $api.setStorage('account', $api.byId('email').value);
                    $api.setStorage('accessToken', ret.id);
                    $api.setStorage('userId', ret.userId);

                    api.alert({
                        title: '大众点评',
                        msg: '登录成功'
                    });

                    api.sendEvent({
                        name: 'setuserinfo'
                    });

                    api.closeWin();
                } else {
                    api.toast({
                        msg: '用户名或密码错误',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });
        }

        //被register_frame.html调用
        function fnSetEmail(email) {
            $api.byId('email').value = email;
        };
    </script>

</html>
